<template>
  <div>
    <div :style="{display:'flex', width:'100%','justify-content':' space-between'}">
      <el-button type="info" plain @click="back">前一天</el-button>
      <el-button type="info" plain @click="getTablelist">今天</el-button>
      <el-button type="info" plain @click="next">后一天</el-button>
    </div>
    <div :style="{'margin-top':'25px'}">
      <el-card>
        <el-table :data="tableList" style="width: 100%">
          <el-table-column prop="userName" label="接种人" align="center">
          </el-table-column>
          <el-table-column prop="callphone" label="联系方式" align="center">
          </el-table-column>
          <el-table-column prop="vaccinaName" label="接种疫苗" align="center">
          </el-table-column>
          <el-table-column prop="state" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type='primary' @click="confirm(scope.row)" v-show="scope.row.state == '待接种'">
                确认已接种
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" align="center">
            <template slot-scope="scope">
              <el-tag type="success" v-show="scope.row.state == '已接种'">已接种</el-tag>
              <el-tag type="danger" v-show="scope.row.state == '待接种'">待接种</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // 表格数据
        tableData: {
          pageNum: 1,
          pageSize: 50
        },
        tableList: {},
        data: 0,
      };
    },
    methods: {
      async getTablelist() {
        let data = this.$moment().format('yyyy-MM-DD 00:00:00')
        const {
          data: res
        } = await this.$http.post(
          "appointment/adminGetAppointment", {
            pageNum: 1,
            pageSize: 50,
            appointmentTime: data
          }
        );
        if (res.code == 200) {
          this.tableList = res.data.data;
          this.data = 0;
          console.log(this.tableList);
        } else {
          this.$message.error(res.msg);
        }
      },
      async next() {
        ++this.data
        let data = this.$moment().add(this.data, 'days').format('yyyy-MM-DD 00:00:00')
        console.log(data)
        const {
          data: res
        } = await this.$http.post(
          "appointment/adminGetAppointment", {
            pageNum: 1,
            pageSize: 50,
            appointmentTime: data
          }
        );
        if (res.code == 200) {
          this.tableList = res.data.data;
          console.log(this.tableList);
        } else {
          this.$message.error(res.msg);
        }
      },
      async back() {
        --this.data
        let data = this.$moment().add(this.data, 'days').format('yyyy-MM-DD 00:00:00')
        const {
          data: res
        } = await this.$http.post(
          "appointment/adminGetAppointment", {
            pageNum: 1,
            pageSize: 50,
            appointmentTime: data
          }
        );
        if (res.code == 200) {
          this.tableList = res.data.data;
          console.log(this.tableList);
        } else {
          this.$message.error(res.msg);
        }
      },
      confirm(e) {
        this.$confirm("是否确认已接种?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.$http
              .post("/appointment/adminVaccination", {
                appointmentId: e.appointmentId,
                vaccineId: e.vaccineId
              })
              .then(res => {
                console.log(res.data.code);
                if (res.data.code == 200) {
                  this.getTablelist();
                  this.$message({
                    type: "success",
                    message: "接种成功!"
                  });
                }
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消确认"
            });
          });
      },
    },
    mounted() {
      this.getTablelist();
      this.data = this.$moment().format('yyyy-MM-DD 00:00:00')
    }
  };

</script>

<style lang="less" scoped></style>
